<template>
  <div class="vipcard">
    <div class="header">
      <van-nav-bar title="影城卡" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="main" ref="scrl">
      <div class="content">
        <ul>
          <li class="vip-card" v-for="item in 3" :key="item">
            <div class="vip-card-header">
              <p class="header-title">{{vipCard.title}}</p>
              <span class="header-price">{{vipCard.price}}</span>
            </div>
            <p class="vip-card-content">{{vipCard.text}}</p>
            <p class="vip-card-floot">{{vipCard.time}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="floot">
      <p class="text" @click="go">去购票</p>
      <van-icon name="arrow" color="#ffffff" size="20" />
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      vipCard: {
        price: 10,
        title: "耀莱成龙影城影城卡",
        text: "开卡可享购票超值会员",
        time: "有效期6个月"
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    //插件初始化
    let wrapper = this.$refs.scrl;
    this.bScroll = new BScroll(wrapper, {
      click: true
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    go() {
      this.$router.push("/ticket");
    }
  }
};
</script>

<style lang="scss">
[class*="van-hairline"]::after {
  position: static;
}

.van-nav-bar {
  background-color: #23262d !important;
  .van-nav-bar__title {
    color: #ffffff;
  }
}
.van-nav-bar__text {
  color: #ffffff;
}
.van-nav-bar .van-icon {
  color: #ffffff;
}
</style>
<style scoped lang="scss" scoped>
.vipcard {
  overflow: hidden;
  background-color: #23262d;
}
.main {
  height: 712px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.header-tips {
  transform: translateY(-2px);
}
.content {
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
  height: 730px;
}
.vip-card {
  padding-top: 0.53333rem;
  background: linear-gradient(136deg, #f25f85 0%, #f2a662 100%);
  border-radius: 0.16rem;
  margin-top: 0.53333rem;
  .vip-card-header {
    padding: 0 10px;
    font-size: 0.37333rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: white;
    line-height: 0.53333rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .vip-card-floot {
    background: linear-gradient(136deg, #f25f85 0%, #f2a662 100%);
    border-radius: 0.16rem;

    font-size: 0.37333rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: white;
    line-height: 0.53333rem;
    padding: 0.18667rem 0.58667rem;
  }
  .vip-card-content {
    padding: 0.96rem 0 1.14667rem;
    font-size: 0.37333rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: white;
    line-height: 0.53333rem;
    text-align: center;
    opacity: 0.7;
  }
}
.floot {
  width: 375px;
  height: 70px;
  background: rgba(44, 47, 54, 1);
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>
